import React, { Component } from 'react'
import IceContainer from '@icedesign/container'
import axios from 'axios'
import Calendar from './Echart/Calendar'
import Block from './block'

export default class Home extends Component {

  constructor (props) {
    super(props)
    this.state = {
      data: [
        {count: 0, title: '模块数',}, {count: 0, title: '接口总数',}, {count: 0, title: '参与人数',},
      ]
    }
  }

  componentWillMount () {
    axios
      .post('/api/getApiHome')
      .then((response) => {
        this.setState({
          data: [
            {count: response.data.actionNum, title: '模块数',},
            {count: response.data.methodNum, title: '接口总数',},
            {count: response.data.authorNum, title: '参与人数',},
          ],
        })
      })
      .catch((error) => {
        Toast.error(error.msg == undefined ? '系统错误' : error.msg)
      })
  }

  render () {
    return (
      <div className="data-display">
        <IceContainer>
          <div style={styles.items}>
            {this.state.data.map((item, index) => {
              return (
                <div style={styles.item} key={index}>
                  <h5 style={styles.count}>{item.count}</h5>
                  <span style={styles.splitLine}/>
                  <p style={styles.title}>{item.title}</p>
                </div>
              )
            })}
          </div>
        </IceContainer>
        <Calendar/>
        <Block/>
      </div>
    )
  }
}

//color:  ['#1e6823','#44a340','#8cc665','#d6e685','#eee']
//color:  ['#3fa1ff','#88d1eb','#3dcbcb','#82dfbf','#50cc73','#ace082','#fbd542','#eba675','#f2637b','#dd81d3','#9660e5','#9f8bf0']

const styles = {
  items: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  item: {
    width: '33.3333%',
    margin: '5px 0',
    textAlign: 'center',
  },
  count: {
    margin: '12px 0',
    fontWeight: 'bold',
    fontSize: '32px',
    color: '#15A0FF',
  },
  title: {
    color: '#999',
  },
  splitLine: {
    display: 'block',
    margin: '0 auto',
    width: '24px',
    height: '1px',
    background: '#9B9B9B',
  },
}